/*
 * @Author: 烟浮
 * @Date: 2022-06-25 22:35:59
 * @LastEditTime: 2022-06-26 02:41:25
 * @LastEditors: 锦墨涵秋 275740441@qq.com
 * @FilePath: /vite-ts-vue3/src/store/index.ts
 */
import { defineStore } from "pinia";

/**
 * @description: 定义并导出容器
 * @description: 参数1： 容器的 ID ，必须唯一，将来 pinia 会把所有的容器挂载到根容器
 * @description: 参数2： 选项对象
 * @return {*}: 返回值：一个函数，调用得到容器实例
 */
export const useMainStore = defineStore('main', {
    /**
     * @description: 类似于组件的 data，用来存储全局状态的
     * 1. 必须是函数： 这样是为了在服务器端渲染的时候避免交叉请求导致状态污染
     * 2. 必须是箭头函数，这是为了更好的 TS 类型推导
     */
    state: () => {
        return {
            count: 100,
            foo: 'bar',
            arr: [0, 1, 2, 3]
        }
    },

    /**
     * @description: 类似于组件的 computed，用来封装计算属性，有缓存的功能
     */
    getters: {
        // 函数接受一个可选参数： state 状态对象
        count10(state) {
            console.log('count10 调用了');
            return state.count + 10
        },
        // 如果在 getters 中使用 this，TS会强制声明返回值类型，手动指定返回值类型，否则类型推导不出来
        // count11(): number {
        //     console.log('count11 调用了');
        //     return this.count + 10
        // }
    },

    /**
     * @description: 类似于组件的 methods，封装业务逻辑，修改 state
     * 注意：不能使用箭头函数定义 action，因为剑突函数绑定了外部 this
     */
    actions: {
        changeState() {
            this.count++
            this.foo = 'hello'
            this.arr.push(4)

            // this.$patch({})
            // this.$patch(state => { })
        }
    }
})

// 2. 使用容器中的 state

// 3. 修改 state

// 4. 容器中的 action 的使用